import { Navigate } from "react-router-dom";
import { lazy } from "react";
// 使用路由懒加载（lazy）
const ProjectList = lazy(() => import("@/views/ProjectList/ProjectList"));
const DataSource = lazy(() => import("@/views/DataSource/DataSource"));
const Home = lazy(() => import("@/views/Home/Home"));
/*测试demo*/ 
const Demo = lazy(() => import("@/views/Demo/Demo"));
// react-redux使用
const CounterSlice = lazy(() => import("@/views/Demo/CounterSlice"));
// 请求封装使用
const ApiUse = lazy(() => import("@/views/Demo/ApiUse"));
// 拖拽使用
const Dnd = lazy(() => import("@/views/Demo/Dnd"));
// 深层嵌套使用top->middle->bottom
const DeepNest = lazy(() => import("@/views/Demo/DeepNest/Top"));

const NoFound = lazy(() => import("@/views/ErrorPage/NoFound"));

/**
 * 项目核心
 */ 
// 可视化编辑器
const Editor = lazy(() => import("@/views/Editor/Editor"));

const routers = [
  {
    path: "/",
    element: <Home />,
    children: [
      {
        path: "/projectlist",
        element: <ProjectList />,
        children: [
          { path: "/projectlist/datasource", element: <DataSource /> },
        ],
      },
      {
        path: "/datasource",
        element: <DataSource />,
      },
      // 测试案例
      {
        path: "/demo",
        element: <Demo />,
        children: [
          { path: "/demo/counterslice", element: <CounterSlice /> },
          { path: "/demo/apiuse", element: <ApiUse /> },
          { path: "/demo/dnd", element: <Dnd /> },
          { path: "/demo/deepnest", element: <DeepNest /> },
        ],
      },
    ],
  },
  {
    path: "/editor",
    element: <Editor />,
  },
  {
    path: "*",
    element: <NoFound />,
  },
];
export default routers;
